<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- SEO优化 -->
    <title>数字人应用 - AI驱动的数字人交互平台</title>
    <meta
      name="description"
      content="基于AI技术的数字人交互应用，提供智能对话、3D展示、语音交互等功能"
    />
    <meta name="keywords" content="数字人,AI,人工智能,3D,语音交互,智能对话" />

    <!-- 性能优化 -->
    <meta name="theme-color" content="#ffffff" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

    <!-- 预加载关键资源 -->
    <link rel="preload" href="/src/main.tsx" as="script" />
    <link rel="preload" href="/src/index.css" as="style" />

    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="//models.readyplayer.me" />
    <link rel="dns-prefetch" href="//aip.baidubce.com" />
    <link rel="dns-prefetch" href="//tsn.baidu.com" />

    <!-- 关键CSS内联 -->
    <style>
      /* 关键渲染路径CSS */
      #root {
        width: 100%;
        height: 100vh;
        background: #ffffff;
        transition: background-color 0.3s ease;
      }

      .dark #root {
        background: #000000;
      }

      /* 加载动画 */
      .loading-spinner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <!-- 加载状态 -->
    <div id="loading" class="loading-spinner"></div>

    <!-- 应用根节点 -->
    <div id="root" class="bg-white dark:bg-black"></div>

    <!-- 主应用脚本 -->
    <script type="module" src="/src/main.tsx"></script>

    <!-- 移除加载动画 -->
    <script>
      window.addEventListener("load", function () {
        const loading = document.getElementById("loading");
        if (loading) {
          loading.style.display = "none";
        }
      });
    </script>
  </body>
</html>
